<template>
  <div>
    <el-button @click="dialogTableVisible1 = !dialogTableVisible1">toggle1</el-button>
    <el-dialog title="dialog1"
               :visible.sync="dialogTableVisible1"
               :append-to-body="true"
               v-dialog-drag
               :modal="false"
               :close-on-click-modal="false"
    >
      <span>这是一段信息</span>
    </el-dialog>


    <el-button @click="dialogTableVisible2 = !dialogTableVisible2">toggle2</el-button>
    <el-dialog title="dialog2"
               :visible.sync="dialogTableVisible2"
               :append-to-body="true"
               v-dialog-drag
               :modal="false"
               :close-on-click-modal="false"
    >
      <span>这是一段信息</span>
    </el-dialog>
  </div>
</template>

<script>
import '@/config/directive'

export default {
  name: "DraggableDialog",
  data() {
    return {
      dialogTableVisible1: false,
      dialogTableVisible2: false
    }
  }
}
</script>

<style>
/*弹窗层元素不可穿透点击事件（不影响弹窗层元素的点击事件）*/
.el-dialog {
  pointer-events: auto
}

/*覆盖层元素增加可穿透点击事件*/
.el-dialog__wrapper {
  pointer-events: none;

}

</style>